<template>
  <div>
    <a-modal v-model:visible="visible">
      <template #title> 出库 </template>
      <a-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
        <a-form-item field="wine_name" label="出库酒类">
          <a-input v-model="form.wine_name" readonly> </a-input>
        </a-form-item>
        <a-form-item field="total" label="库存剩余">
          <a-input v-model="form.total" readonly>
            <template #append> 瓶 </template></a-input
          >
          <template #help>
            <div>总计:{{ (form.total / form.wine_case).toFixed(1) }}箱</div>
          </template>
        </a-form-item>
        <a-form-item field="out_num" label="出库数量(箱)">
          <a-input
            v-model="form.out_num"
            type="number"
            :placeholder="`最多可出库${(form.total / form.wine_case).toFixed(
              1
            )}箱`"
          >
            <template #append> 箱 </template>
          </a-input>
        </a-form-item>
        <a-form-item field="out_date" label="出库时间">
          <a-date-picker
            show-time
            style="width: 100%"
            v-model="form.out_date"
            placeholder="请选择出库时间"
          />
        </a-form-item>
        <a-form-item field="out_remark" label="备注">
          <a-textarea
            v-model="form.out_remark"
            placeholder="请输入备注"
            allow-clear
            show-word-limit
            :max-length="200"
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button type="primary" @click="saveOutData">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { wineOut } from '@/api/storeroom';
import { Message } from '@arco-design/web-vue';

const props = defineProps({
  againGetOutLits: { type: Function },
});
const visible = ref(false);
const recordInfo = ref(null);
const formRef = ref(null);
const saveOutData = async () => {
  const { data, code, message } = await wineOut(form);
  if (code === 200) {
    Message.success(message);
    recordInfo.value.total =
      recordInfo.value.total - form.out_num * form.wine_case;
      props.againGetOutLits()
    visible.value = false;
  }
};
const openDialog = (record) => {
  form.out_num = '';
  form.out_date = null;
  form.out_remark = '';
  form.total = record.total;
  form.wine_case = record.wine_case;
  if (record.wine_id) {
    form.winetype_id = record.wine_id;
    form.wine_name = record.wine_name;
  }
  recordInfo.value = record;
  visible.value = true;
};
const form = reactive({
  wine_name: '', // 名称
  winetype_id: '', // 酒类id
  out_num: '', // 出库数量
  out_date: '', // 出库时间
  out_remark: '', // 备注
  total: 0, //库存剩余
  wine_case: 0, // 瓶装数量
});
defineExpose({
  openDialog,
});
</script>

<style lang="less" scoped></style>